import React from 'react';
import { message,Modal } from 'antd';

/**
 *  编辑标签模态框
 *
 * @class EidtTagModal
 * @extends {Component}
 */
class EidtTagModal extends React.Component{
  constructor(props){
      super(props)
      this.state = {
          visible:this.props.visible,
          caseData:{
                  caseHeadValue:  '',
                  caseTagList:[],
              },
      }
  }

  componentWillReceiveProps({caseId}){
      const data = {
          type_id:caseId
      }
      const nowId = this.props.caseId;
      if(caseId && nowId !== caseId){
          const { fatchCaseList } = this.props;
          fatchCaseList(data).then((res)=>{
              console.log(res.data)
              this.setState({
                  caseData:{
                      caseHeadValue:  res.data[res.data.length-1].type_name,
                      caseTagList:res.data
                  }
              })
          })
      }
  }

  addRow = ()=>{
      const addData = {
          num:0,
          tag_name:''
      }
      const currentList = [...this.state.caseData.caseTagList];
      this.setState({
          caseData:{
              ...this.state.caseData,
              caseTagList:[addData,...currentList]
          }
      })
      // const { caseData: { caseTagList }} = this.state;
      // caseTagList.unshift({ num:0 });
      // this.setState({
      //     caseData:{ caseTagList }
      // })
      // console.log(this.state.caseData)
  }

  saveCaseTag = ()=>{

  }

  caseHeadChangeHandle = (e)=>{
      this.setState({
          caseData:{
              caseHeadValue:e.target.value
          }
      })
  }

  caseTagChangeHandle(e,i){
      let currentList = this.state.caseData.caseTagList;
      currentList[i].tag_name = e.target.value;
      this.setState({
          caseData:{
              ...this.state.caseData,
              caseTagList:currentList
          }
      })
  }

  delRow(i){
      let currentList = [...this.state.caseData.caseTagList];
      currentList.splice(i,1);
      console.log(currentList)
      this.setState({
          caseData:{
              ...this.state.caseData,
              caseTagList:currentList
          }
      })
  }

  render(){
      const { visible,handleOk,handleCancel }  = this.props;
      const { caseHeadValue,caseTagList } = this.state.caseData;
      // console.log(caseHeadValue)
      return(
          <Modal
              visible={visible}
              onOk={handleOk}
              onCancel={handleCancel}
              footer={null}
              className="w900 h500"
              >
              <div className="edit-tag-case">
                  <div className="center-b-box">
                      <span className="cc f20 cp">返回</span>
                      <span className="cc f20 cp" onClick={this.saveCaseTag}>保存</span>
                  </div>
                  <input onChange={this.caseHeadChangeHandle} type="text" value={caseHeadValue} className="form-control w150 mt20"
                  placeholder="(限5字)" />
                  <div className="mt30 h250 oa">
                      <table>
                          <thead>
                              <tr className="h52">
                                  <th>序号</th>
                                  <th>标签名字(限全部)</th>
                                  <th>线上使用次数</th>
                                  <th>操作</th>
                              </tr>
                          </thead>
                          <tbody>
                              {caseTagList && caseTagList.map((item,i)=>
                                  <tr className="h72 bceef" key={i}>
                                      <td>{i + 1}</td>
                                      <td>
                                          <input autoFocus = {i === 0 ? true : false} onChange={(e)=>this.caseTagChangeHandle(e,i)}
                                          type="text" value={item.tag_name} className="form-control w150" />
                                      </td>
                                      <td>{item.num}</td>
                                      <td><button className="bt w80 h36 f20" onClick={()=>this.delRow(i)}>删除</button></td>
                                  </tr>
                              )}
                          </tbody>
                      </table>
                  </div>
                  <div className="center-end mt30">
                      <button className="bt w120 h40 f20" onClick={this.addRow}>添加</button>
                  </div>
              </div>
          </Modal>
      )
  }
}

export default EidtTagModal;